<template>
    <view class="content">
        <view class="card">
			<image src="../../static/image/bg_3.png" class="bg-3" v-if="data.status == 0"></image>
			<image src="../../static/image/bg_4.png" class="bg-3" v-else></image>
        	<view class="info" :class="{active : data.status != 0}">
        		<view>一诺健康管理卡</view>
        		<view class="num">NO.{{data.card_no}}</view>
				
				<view class="time" v-if="data.status == 5">{{data.status_txt}}</view>
        		<view class="time" v-else>有效期至{{data.end_time}}</view>
        	</view>
        </view>
		
		<view class="box">
			<view class="item">
				<view class="i-left">会员：</view>
				<view class="i-right">{{ data.nickname || '未绑定' }}</view>
			</view>
			<view class="item">
				<view class="i-left">身份证号：</view>
				<view class="i-right">{{ data.IDCard || '未绑定' }}</view>
			</view>
			<view class="item">
				<view class="i-left">实名绑定时间：</view>
				<view class="i-right">{{ data.bind_time || data.status_txt }}</view>
			</view>
			<view class="item">
				<view class="i-left">剩余体检次数：</view>
				<view class="i-right2">
					{{data.exam_nums}}次
					<text v-if="data.status == 0">(实名绑定后预约体检)</text>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="item border-b" v-if="data.status == 0" @click="$gTo(`./share?card_id=${card_id}`)">
				<image src="../../static/icon/icon_2.png" class="icon-2"></image>
				<view class="u-flex-1">赠送亲友</view>
				<u-icon name="arrow-right" color="#a9a9a9" size="28"></u-icon>
			</view>
			<view class="item" @click="$gTo(`./buy?card_id=${card_id}`)">
				<image src="../../static/icon/icon_1.png" class="icon-2"></image>
				<view class="u-flex-1">管理卡续费</view>
				<u-icon name="arrow-right" color="#a9a9a9" size="28"></u-icon>
			</view>
		</view>
		
		<view class="footer" v-if="data.status == 0">
			<view>
				<view class="f-day">剩余时间：{{data.days}}天</view>
				<view class="f-sta">未实名绑定</view>
			</view>
			<view class="f-btn" @click="$gTo(`./binding?card_id=${card_id}`)">立即绑定</view>
		</view>
		<view class="footer" v-else>
			<view>
				<view class="f-day">到期日期：{{data.end_time}}</view>
				<view class="f-sta">续费可增加体检次数</view>
			</view>
			<view class="f-btn" @click="$gTo(`./buy?card_id=${card_id}`)">立即续费</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 0,
				card_id: '',
				data: {},
            };
        },
        onLoad(option) {
            if (option.card_id) {
				this.card_id = option.card_id
				
			}
        },
		onShow() {
			this.getData()
		},
        methods: {
            getData() {
            	this.$ajax('get_cards_detail', {
                    userToken: this.$getSync('userToken'),
            		card_id: this.card_id,
                }).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
	
    page{
    	background: linear-gradient(to top,#f5f5f5,#f5f5f5,#f5f5f5,#03b8b4);
    }
    .content{
    	padding: 20rpx;
    	min-height: 100vh;
    }
	.card{
		margin-bottom: 30rpx;
		position: relative;
	}
	.bg-3{
		width: 710rpx;
		height: 348rpx;
	}
	.info{
		width: 710rpx;
		height: 348rpx;
		padding: 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 30rpx;
		color: #fff;
	}
	.active{
		color: #843d12;
	}
	.num{
		font-size: 44rpx;
		font-weight: bold;
		padding: 70rpx 0;
	}
	.time{
		font-size: 24rpx;
	}
	
	.box{
		padding: 15rpx 28rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.item{
		padding: 22rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}
	.i-left{
		color: #acacac;
	}
	.i-right{
		flex: 1;
		padding-left: 20rpx;
		text-align: right;
	}
	.i-right2{
		color: #fe9f50;
	}
	.icon-2{
		width: 33rpx;
		height: 33rpx;
		margin-right: 15rpx;
	}
	.border-b{
		border-bottom: 2rpx solid #e6e6e6;
	}
	
	
	.footer{
		width: 750rpx;
		padding: 14rpx 28rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}
	.f-day{
		font-size: 24rpx;
		color: #000;
	}
	.f-sta{
		font-size: 24rpx;
		color: #fe8928;
	}
	.f-btn{
		font-size: 30rpx;
		color: #fff;
		padding: 16rpx 40rpx;
		background-color: #01b6bc;
		border-radius: 50rpx;
	}

</style>
